<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>收藏书签栏</title>
  <!-- 导入 Vue.js -->
  <script src="./lib/vue.global.js"></script>
  <!-- 导入 Axios.js -->
  <script src="./lib/axios.min.js"></script>
  <!-- 导入 ElementPlus -->
  <script src="./lib/element-plus.js"></script>
  <!-- 导入自定义组件和样式文件 -->
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/element-plus.css">
</head>

<body>

  <div id="app">
    <div class="chrome">

      <!-- Chrome 顶部栏 -->
      <div class="chrome-toolbar">
        <div class="chrome-tabs">
          <div class="tab" v-for="(tab, index) in tabs" :key="index" :class="{ active: index === activeTab }"
            @click="switchTab(index)">
            <span>{{ tab.title }}</span>
            <button @click="closeTab(index)">
              <svg width="12" height="12" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1l10 10M11 1L1 11" stroke="#888" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
              </svg>
            </button>
          </div>
          <div class="new-tab" @click="addTab">+</div>
        </div>
        <div class="chrome-controls">
          <button @click="goBack">
            <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M11 1L3 8l8 7" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </button>
          <button @click="goForward">
            <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5 1l8 7-8 7" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
          </button>
          <input type="text" v-model="addressBar" @keydown.enter="navigate">
          <button @click="refresh">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4 4v5h5M20 20v-5h-5" stroke="#555" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round" />
              <path d="M20 12A8 8 0 114 12a8 8 0 0116 0z" stroke="#555" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round" />
            </svg>
          </button>


          <button @click="openBookmarkDialog">
            <svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 3v14l5-5 5 5V3H3z" stroke="#555" stroke-width="2" stroke-linecap="round"
                stroke-linejoin="round" />
            </svg>
            <!-- 添加书签 -->
          </button>

        </div>
      </div>



      <!-- 收藏夹栏 -->
      <div class="chrome-bookmarks">
        <div class="bookmark-list">
          <bookmark-item v-for="(item, index) in bookmarks" :key="index" :item="item" @navigate="navigateToBookmark">
          </bookmark-item>
        </div>

      </div>
      <div style="padding: 20px;">
        <h2>收藏夹管理</h2>
        <el-tree :allow-drop="allowDrop" :data="treeData" draggable default-expand-all node-key="label"
          @node-drop="handleNodeDrop"></el-tree>

      </div>


      <!-- 书签对话框 -->
      <div class="bookmark-dialog" v-if="showDialog">
        <div class="dialog-content">
          <h3>添加书签</h3>
          <label for="bookmark-title">Title:</label>
          <input type="text" v-model="bookmarkTitle" id="bookmark-title" />

          <label for="bookmark-url">URL:</label>
          <input type="text" v-model="bookmarkUrl" id="bookmark-url" />

          <label for="bookmark-folder">文件夹:</label>
          <select v-model="selectedFolderPath" id="bookmark-folder">
            <option v-for="folder in folderOptions" :key="folder.path" :value="folder.path">{{ folder.label }}</option>
          </select>

          <div class="dialog-actions">
            <button @click="addBookmark">添加</button>
            <button @click="closeDialog">取消</button>
          </div>
        </div>
      </div>


    </div>


  </div>

  <!-- 引入 JavaScript -->
  <script src="./js/index.js"></script>

</body>

</html>